<template>
    <div class="home" :style="'background-image:url(' + bg + ')'">
        <div
            class="home-logo"
            :style="'background-image:url(' + logo + ')'"
        ></div>
        <div class="home-box">
            <div class="hb-top" :style="'background-image:url(' + topBg + ')'">
                <img class="hbt-img" :src="topBgIcon" />
            </div>
            <div class="hb-form">
                <div class="hbf-flex hbf-username" v-if="source">
                    <div class="hbf-flex-txt hbf-username-txt">姓名</div>
                    <input
                        class="hbf-flex-input hbf-username-input"
                        :class="real_nameFlag ? 'right' : 'wrong'"
                        type="text"
                        v-model="real_name"
                        @input="validateName"
                        maxlength="16"
                        placeholder="请输入您的姓名"
                    />
                </div>
                <div class="hbf-flex hbf-mobile" v-if="source">
                    <div class="hbf-flex-txt hbf-mobile-txt">手机号</div>
                    <input
                        class="hbf-flex-input hbf-mobile-input"
                        :class="mobileFlag ? 'right' : 'wrong'"
                        type="tel"
                        v-model="mobile"
                        @input="validateMobile"
                        maxlength="11"
                        placeholder="请输入您的手机号"
                    />
                </div>
                <div class="hbf-flex hbf-nick" v-if="source">
                    <div class="hbf-flex-txt hf-nick-txt">孩子昵称</div>
                    <input
                        class="hbf-flex-input hf-nick-input"
                        :class="baby_nicknameFlag ? 'right' : 'wrong'"
                        type="text"
                        v-model="baby_nickname"
                        @input="validateNick"
                        maxlength="8"
                        placeholder="请输入您的孩子昵称"
                    />
                </div>
                <div class="hbf-source-error" v-elseif="!source">
                    请重新扫码确认当前页面来源
                </div>
            </div>
        </div>
        <button class="home-submit-btn" v-if="source" @click="submitValidate">
            <span class="hsb-txt-l">提</span><span class="hsb-txt-r">交</span>
        </button>
        <div class="home-mask" v-show="maskFlag" @click.stop="stopEvent">
            <div class="hm-txt">{{ maskText }}</div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      source: true,
      bg: require('./../assets/img/bg.png'),
      logo: require('./../assets/img/logo.png'),
      topBg: require('./../assets/img/bg-top.png'),
      topBgIcon: require('./../assets/img/bg-top-icon.png'),
      id: 0,
      real_name: '',
      mobile: '',
      baby_nickname: '',
      real_nameFlag: true,
      mobileFlag: true,
      baby_nicknameFlag: true,
      subMitFlag: false,

      maskFlag: false,
      maskText: '请稍后...'
    }
  },
  mounted () {
    this.checkUrl()
  },
  methods: {
    stopEvent () {},
    checkUrl () {
      if (!this.$route.params.id) {
        this.source = false
      } else {
        this.source = true
        this.id = this.$route.params.id
      }
    },
    validateMobile (e) {
      this.mobile = this.mobile.replace(/[^0-9]/g, '')
      console.log('this.mobile', this.mobile)
      this.mobileFlag = this.mobile ? this.isMobile(this.mobile) : true
    },
    validateName (e) {
      this.real_name && (this.real_nameFlag = true)
    },
    validateNick (e) {
      this.baby_nickname && (this.baby_nicknameFlag = true)
    },
    submitValidate () {
      this.real_name = this.real_name.trim()
      this.mobile = this.mobile.trim()
      this.baby_nickname = this.baby_nickname.trim()
      if (this.real_name == '') {
        this.real_nameFlag = false
      }
      if (this.mobile == '') {
        this.mobileFlag = false
      }
      if (this.baby_nickname == '') {
        this.baby_nicknameFlag = false
      }
      if (
        this.real_nameFlag &&
                this.mobileFlag &&
                this.baby_nicknameFlag &&
                !this.subMitFlag
      ) {
        this.maskText = '请稍后...'
        this.maskFlag = true
        this.subMitFlag = true
        this.submit()
      }
    },
    submit () {
      const data = {
        admin_id: this.id,
        real_name: this.real_name,
        mobile: this.mobile,
        baby_nickname: this.baby_nickname
      }
      this.$axios
        ._post(this.$api.useruser_add, data)
        .then((res) => {
          this.maskFlag = false
          this.subMitFlag = false
          window.location.href = res.url
        })
        .catch((err) => {
          if (err.msg) {
            this.maskText = err.msg
          } else {
            this.maskText = '网络错误，请重试。'
          }
          setTimeout(() => {
            this.subMitFlag = false
            this.maskFlag = false
          }, 1500)
        })
    }
  },
  beforeRouteUpdate (to, from, next) {
    this.checkUrl()
    next()
  }
}
</script>
<style lang="less">
.home {
    width: 750px;
    height: 100%;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;

    .home-logo {
        position: absolute;
        top: 0;
        left: calc((750px - 656px) / 2);
        width: 250px;
        height: 80px;
        z-index: 5;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .home-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2;

        .hb-top {
            width: 750px;
            height: 898px;
            background-size: cover;
            background-position: top;
            background-repeat: no-repeat;

            .hbt-img {
                display: block;
                width: 268px;
                height: 86px;
                margin: 0 auto;
                transform: translateY(270px);
            }
        }

        .hb-form {
            position: absolute;
            top: 440px;
            left: 50%;
            transform: translateX(-50%);
            width: 656px;
            border-radius: 24px;
            background: #ffffff;
            box-shadow: 0 0 0px 6px #ff9e47;
            box-sizing: border-box;
            padding: 112px 82px;

            .hbf-flex {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                margin-bottom: 42px;

                &:last-child {
                    margin-bottom: 0px;
                }

                .hbf-flex-txt {
                    font-size: 28px;
                    color: #2e3136;
                    font-weight: 500;
                    display: inline-block;
                    width: 114px;
                    height: 66px;
                    line-height: 66px;
                    text-align: justify;
                    text-align-last: justify;
                }

                .hbf-flex-input {
                    height: 66px;
                    font-size: 28px;
                    width: 348px;
                    box-sizing: border-box;
                    border: 2px solid transparent;
                    background: #f7f6f6;
                    border-radius: 6px;
                    color: #2e3136;
                    outline: none;
                    padding-left: 25px;
                    padding-right: 25px;

                    &::-webkit-input-placeholder {
                        color: #d3d2d2;
                    }

                    &:-moz-placeholder {
                        color: #d3d2d2;
                    }

                    &::-moz-placeholder {
                        color: #d3d2d2;
                    }

                    &:-ms-input-placeholder {
                        color: #d3d2d2;
                    }

                    &.wrong::-webkit-input-placeholder {
                        color: #f00;
                    }

                    &.wrong:-moz-placeholder {
                        color: #f00;
                    }

                    &.wrong::-moz-placeholder {
                        color: #f00;
                    }

                    &.wrong:-ms-input-placeholder {
                        color: #f00;
                    }

                    &.right {
                    }

                    &.wrong {
                        color: #f00;
                        border-color: red;
                    }
                }
            }
            .hbf-source-error {
                text-align: center;
                color: #f00;
                font-size: 28px;
                font-weight: 500;
            }
        }
    }

    .home-submit-btn {
        position: absolute;
        bottom: 68px;
        left: 50%;
        transform: translateX(-50%);
        outline: none;
        border: none;
        padding: 0 !important;
        width: 258px;
        height: 74px;
        line-height: 74px;
        border-radius: 74px;
        background-color: #fe9f49;
        text-align: center;
        color: #ffffff;
        font-size: 28px;
        font-weight: 800;

        & > span {
            display: inline-block;
        }

        .hsb-txt-l {
            margin-right: 12px;
        }
    }
    .home-mask {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        .hm-txt {
            width: 380px;
            height: 200px;
            line-height: 200px;
            box-sizing: border-box;
            padding-left: 24px;
            padding-right: 24px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            border-radius: 12px;
            background: rgba(0, 0, 0, 0.7);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateY(-50%) translateX(-50%);
            color: #ffffff;
            font-size: 28px;
            text-align: center;
        }
    }
}
</style>
